<template>
  <div class="p-4">
    <el-button class="mb-4" type="primary" @click="exportImg"
      >将图谱导出为图片</el-button
    >
    <div id="container"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, defineProps, ref, computed } from "vue";

import G6 from "@antv/g6";

import { usePolicyAtlasHook } from "./hook";

import { splitStrFn } from "../../utils/splitStr";

import { useUserStore } from "../../store/user";

const props = defineProps(["data", "searchType"]);

const { data } = usePolicyAtlasHook();

const graph = ref<any>(null);

const userStore = useUserStore();
const userInfo = computed<any>(() => userStore.userInfo);

onMounted(() => {
  G6.registerNode("card-node", {
    draw: function drawShape(cfg: any, group: any) {
      const r = 8;
      const color = "#5B8FF9";
      const w = 120;
      const h = cfg.size[1];
      const shape = group.addShape("rect", {
        attrs: {
          x: -w / 2,
          y: -h / 2,
          width: w, //200,
          height: h, // 60
          stroke: "#fff",
          radius: r,
          fill: color
        },

        name: "main-box",
        draggable: true
      });
      cfg.children &&
        group.addShape("marker", {
          attrs: {
            x: w / 2,
            y: h / 2,
            r: 6,
            cursor: "pointer",
            symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,
            stroke: "#fff",
            lineWidth: 1,
            fill: "red"
          },
          name: "collapse-icon"
        });
      group.addShape("text", {
        attrs: {
          textBaseline: "middle",
          width: w, //200,
          height: h, // 60
          text: splitStrFn(cfg.label, 11),
          textAlign: "center",
          fontSize: 8,
          fill: "#fff"
        },
        name: `description`
      });
      return shape;
    },
    setState(name, value, item: any) {
      if (name === "collapsed") {
        const marker = item
          .get("group")
          .find((ele: any) => ele.get("name") === "collapse-icon");
        const icon = value ? G6.Marker.expand : G6.Marker.collapse;
        marker.attr("symbol", icon);
      }
    }
  });

  const container: any = document.getElementById("container");
  const width = container?.scrollWidth;
  const height = container?.scrollHeight || 500;

  graph.value = new G6.TreeGraph({
    container: "container",
    width,
    height,
    modes: {
      default: ["drag-canvas", "zoom-canvas"]
    },
    defaultNode: {
      type: "card-node",
      size: [100, 40]
    },
    defaultEdge: {
      type: "cubic-horizontal",
      style: {
        endArrow: false,
        stroke: "#2a79bf"
      }
    },
    layout: {
      type: "indented",
      direction: "LR",
      dropCap: false,
      indent: 200,
      getHeight: () => {
        return 60;
      }
    }
  });

  graph.value.data(props.data);
  graph.value.render();
  graph.value.fitView();
  graph.value.fitCenter();

  G6.Util.traverseTree(props.data, function (item: any) {
    if (item.depth > 0) {
      //collapsed为true时默认收起
      item.collapsed = true;
    }
  });

  graph.value.data(props.data);
  graph.value.render();
  graph.value.fitView();
  graph.value.fitCenter();
  graph.value.on("node:click", (e: any) => {
    const vipType = userInfo.value?.vip;
    // console.log();

    const idx = e.item._cfg.model.depth;
    // 注册会员
    if (vipType == 0 && idx >= 1) {
      return alert("你没有权限点击");
    } else if (vipType == 1 && idx >= 2) {
      return alert("你没有权限点击");
    }

    if (e.target.get("name") === "collapse-icon") {
      e.item.getModel().collapsed = !e.item.getModel().collapsed;
      graph.value.setItemState(
        e.item,
        "collapsed",
        e.item.getModel().collapsed
      );
      graph.value.layout();
      // graph.value.fitView();
      // graph.value.fitCenter();
    } else {
      // 跳转到政策详情页面
      if (e.item._cfg.id != 0) {
        window.open(
          `${location.origin}/detail?id=${e.item._cfg.id}&searchType=${
            props.searchType ? props.searchType : "2"
          }`,
          "_blank"
        );
      }
    }
  });

  // 定位到画布中心
  graph.value.fitCenter();

  if (typeof window !== "undefined")
    window.onresize = () => {
      if (!graph.value || graph.value.get("destroyed")) return;
      if (!container || !container.scrollWidth || !container.scrollHeight)
        return;
      graph.value.changeSize(container.scrollWidth, container.scrollHeight);
    };
});

// 导出图片
const exportImg = () => {
  graph.value.downloadFullImage("透策图谱");
};
</script>

<style scoped lang="postcss">
#container {
  height: 80vh;
}
</style>
